<!--
 * @Author: zhangjiajie
 * @Date: 2022-07-29 13:50:55
 * @LastEditors: zhangjiajie
 * @LastEditTime: 2022-08-05 11:28:59
 * @FilePath: \hxsapp-fe3\src\common\components\LsVideo\index.vue
 * @Description: AliPlay视频播放
 * 
-->
<template>
  <div id="AliPlay"></div>
</template>

<script>
const CONFIG = {}
export default {
  props: {
    source: {
      type: String,
      default: ""
    },
    option: {
      type: Object,
      default: () => CONFIG
    },
  },
  data () {
    return {
      player: null,
    }
  },
  created () {
  },
  mounted () {
    this.$nextTick(() => {
      this.AliplayerInit()
    })
  },
  destroyed () {
    this.player.dispose();
    this.player = null;
  },
  methods: {
    handlePauseFn () {
      console.log("播放监听")
    },
    handlePlayFn () {
      console.log("暂停监听")
    },
    handleHideBarFn () {
      console.log("控件隐藏监听")
    },
    handleShowBarFn () {
      console.log("控件显示监听")
    },
    AliplayerInit () {
      let config = {
        id: "AliPlay",
        source: this.source,
        playsinline: this.option?.playsinline || true,//H5 是否内置播放，有的 Android 浏览器不起作用。
        preload: this.option?.preload || false,//播放器自动加载，目前仅 h5 可用。
        isLive: this.option?.isLive || false, //播放内容是否为直播
        width: this.option?.width || "100%", //宽高度
        height: this.option?.height || "100%", //宽高度
        videoWidth: this.option?.videoWidth || "100%", //视频宽度，仅 h5 支持。详情参见旋转和镜像。
        videoHeight: this.option?.videoHeight || "100%",//视频高度，仅 h5 支持。详情参见旋转和镜像。
        cover: this.option?.cover || '',//播放器默认封面图片，需要 autoplay 为’false’时，才生效
        autoplay: this.option?.autoplay || false,  //播放器是否自动播放，在移动端 autoplay 属性会失效
        rePlay: this.option?.rePlay || true, // 播放器自动循环播放。
        useH5Prism: this.option?.useH5Prism || true,// 指定使用 H5 播放器。
        controlBarVisibility: this.option?.controlBarVisibility || "click",//控制面板的实现，默认为‘hover’。可选的值为：‘click’、‘hover’、‘always’。
        showBarTime: this.option?.showBarTime || 3000,
        skinLayout: [
          { name: "bigPlayButton", align: "cc", },
          {
            name: "H5Loading", align: "cc"
          },
          { name: "errorDisplay", align: "tlabs", x: 0, y: 0 },
          { name: "infoDisplay" },
          { name: "tooltip", align: "blabs", x: 0, y: 56 },
          { name: "thumbnail" },
          {
            name: "controlBar", align: "blabs", x: 0, y: 0,
            children: [
              { name: "progress", align: "blabs", x: 0, y: 44 },
              { name: "playButton", align: "tl", x: 15, y: 12 },
              { name: "timeDisplay", align: "tl", x: 10, y: 7 },
              { name: "fullScreenButton", align: "tr", x: 10, y: 12 },
            ]
          }
        ]
      }
      if (this.option?.skinLayout) config.skinLayout = []//传 true 隐藏所有功能组件，请参照皮肤定制。
      this.player = new Aliplayer(config, function (player) {
        console.log("The player is created");
      });
      // this.player.on('pause', this.handlePauseFn);
      // this.player.on('play', this.handlePlayFn);
      // this.player.on('hideBar', this.handleHideBar);
      // this.player.on('showBar', this.handleShowBar);
    }
  },

}
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
#AliPlay {
  /deep/video {
    object-fit: cover; //根据需要更改，有cover、contain等等
  }
}
</style>